<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>仿QQ好友分组</title>
<style type="text/css">
	table{border:#09f 1px solid;width:100px;border-collapse:collapse;margin:15px 10px;margin:20px 20px;}
	table td{border:#06f 1px solid;background-color:#6f5f3e;text-align:center;padding:5px 0;}
	table td div{background-color:#ff9;text-align:left;line-height:28px;padding-left:14px;text-indent:padding-left:20px;}
	table td span{color:#fff;font-size:19px;width:100%;border:none;display:block;cursor:pointer;}
	table td a:hover{color:#0c0}
</style>

<!--引入jquery的js库-->
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	/** 通过jQuery实现仿QQ列表好友列表 */
	function openDiv(thisobj){
		
	}
	
	$(function(){
		$("span").click(function(){
			
		});
	})

</script>
</head>
<body>
<table>
	<tr>
		<td>
			<span onclick="openDiv(this)">君王好友</span>
			<div style="display:none">
				秦始皇<br />
				刘邦<br />
				李世民<br />
				康熙<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<span onclick="openDiv(this)">三国好友</span>
			<div style="display:none">
				刘备<br />
				关羽<br />
				张飞<br />
				赵云<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<span onclick="openDiv(this)">美女好友</span>
			<div style="display:none">
				西施<br />
				貂蝉<br />
				杨贵妃<br />
				王昭君<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<span onclick="openDiv(this)">IT好友</span>
			<div style="display:none">
				王海涛<br />
				马云<br />
				李开复<br />
				俞敏洪<br />
			</div>
		</td>
	</tr>
</table>
</body>
</html>
